import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { getFindUrl } from '../api/index'

const AsideWrapper = styled.div`
  a {
    display: block;
    width: 100%;
    height: 80px;
    marin: 2px 0;
    background: #ccc;
    text-align:center;
    line-height: 80px;
  } 
`

export default class LeftUrl extends Component {

  state = {
    arr: []
  }

  render() {
    return (
      <AsideWrapper>
        {
          this.state.arr.map((item, index) => {
            return <NavLink key={`/homeIndex/${item}`} to={item} >
              {item}
            </NavLink>
          })
        }

      </AsideWrapper >
    )
  }

  componentDidMount() {
    getFindUrl().then(res => {
      if (res.length) {
        const url = JSON.parse(res[0].titleurl)
        this.setState({
          arr: url
        })
      }
    })
  }
}
